<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/layui.css" media="all">
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
  <link rel="stylesheet" href="css/fangzi-detail.css">
</head>
<body>
<div class="normal-size fangzi-box">
  <div class="fangzi-t clearfix">
    <p class="fl"><a href="zufang_detail.html" class="normal-t">我要租房</a><em>委托后就是这么轻松</em></p>
    <p class="fl"><a href="buy-house-detail.html" class="active-t">我要买房</a><em>推荐最优质的房源</em></p>
  </div>
  <div class="fang-search-box clearfix">
    <div class="fang-search fl">
      <form class="layui-form" action="">
        <div class="layui-form-item">
          <div class="layui-input-inline" style="width: 100%">
            <input type="text" name="title"  placeholder="你可以指定小区选房" autocomplete="off" class="layui-input">
          </div>
        </div>
        <span class="fang-search-btn"></span>
      </form>
    </div>
    <div class="fr clearfix fang-filter-t">
      <p class="filter-t">
        委托流程：
        <a href="#" class="">选择区域</a>
        →
        <a href="#" class="active">面积户型</a>
        →
        <a href="#" class="">特需和预算</a>
      </p>
    </div>
  </div>
  <div class="news-page clearfix">
    <!--左边-->
    <div class="fl left-filter-box">
      <div class="left-filter">
        <p class="text-filter-text "><a href="#">您的购房区域是？</a></p>
        <p class="text-filter-text active"><a href="#">您期望的户型和面积是？</a></p>
        <p class="text-filter-text"><a href="#">您的特别需求和预算是？</a></p>
      </div>
      <h2 class="my-tj"><span>我的条件</span></h2>
      <div class="fl choosed-filter">
        <ul class="clearfix">
          <li class="delete-item">
            <a href="#">龙华区</a>
            <span class="delete-icon"></span>
          </li>
          <li class="delete-item">
            <a href="#">龙华区</a>
            <span class="delete-icon"></span>
          </li>
          <li class="delete-item">
            <a href="#">龙华区</a>
            <span class="delete-icon"></span>
          </li>
        </ul>
      </div>
      <span class="delete-box"></span>
    </div>
    <!--右边-->
    <div class="fr right-filter">
      <!--筛选类型-->
      <div class="sort-filter-box">
        <!--选择户型和面积-->
        <div class="sort-filter-item">
          <form class="layui-form">
            <div class="top-filter">
              <div class=quyu-box style="margin-top: 0;margin-bottom: 15px">
                <p class="filter-t-text">您期望的户型是：</p>
                <ul class="quyu-list clearfix">
                  <li class="quyu-item fl"><a href="#">一室</a></li>
                  <li class="quyu-item fl active"><a href="#">二室</a></li>
                  <li class="quyu-item fl"><a href="#">三室</a></li>
                  <li class="quyu-item fl"><a href="#">四室</a></li>
                  <li class="quyu-item fl"><a href="#">五室</a></li>
                  <li class="quyu-item fl"><a href="#">五室以上</a></li>
                </ul>
              </div>
              <div class=quyu-box style="margin-top: 0">
                <p class="filter-t-text">您期望的面积是：</p>
                <ul class="quyu-list clearfix">
                  <li class="quyu-item fl"><a href="#">50㎡以下</a></li>
                  <li class="quyu-item fl active"><a href="#">50-70㎡</a></li>
                  <li class="quyu-item fl"><a href="#">70-90㎡</a></li>
                  <li class="quyu-item fl"><a href="#">90-120㎡</a></li>
                  <li class="quyu-item fl"><a href="#">120-150㎡</a></li>
                  <li class="quyu-item fl"><a href="#">150-200㎡</a></li>
                  <li class="quyu-item fl"><a href="#">200㎡以上</a></li>
                </ul>
              </div>
            </div>
            <!--联系方式-->
            <div class="fang-contact">
              <div class="layui-form-item">
                <div class="layui-inline" style="position: relative">
                  <label class="layui-form-label"><em class="required-text">*</em> 手机号</label>
                  <div class="layui-input-inline" style="width: 230px">
                    <input type="tel" placeholder="请输入手机号" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                  </div>
                  <span class="tel-icon-box"></span>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label"><em class="required-text">*</em> 联系人</label>
                  <div class="layui-input-inline" style="width: 230px">
                    <input type="text" name="email" placeholder="请输入您的姓名" lay-verify="required" autocomplete="off" class="layui-input">
                  </div>
                  <span class="user-icon-box"></span>
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label">验证码</label>
                  <div class="layui-input-inline" style="width: 120px">
                    <input style="padding-left: 10px" type="tel" name="phone" placeholder="请输入验证码"  lay-verify="required" autocomplete="off" class="layui-input">
                  </div>
                  <div class="layui-form-mid" style="color: #fe8000;cursor: pointer">获取验证码</div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label"></label>
                  <div class="layui-input-block" style="margin-left: 109px">
                    <input type="radio" name="sex" value="男" title="男" checked="">
                    <input type="radio" name="sex" value="女" title="女">
                  </div>
                </div>
              </div>
            </div>
            <div class="layui-form-item" style="margin-top: 30px">
              <div class="layui-input-block" style="text-align: center;margin-left: 0">
                <button class="layui-btn" lay-submit="" lay-filter="demo1" style="padding: 0 60px;font-size: 18px;background-color: #fe8000">一键委托</button>
              </div>
            </div>
          </form>

        </div>


      </div>

    </div>
  </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/layui.js"></script>
<script>
  layui.use('form', function(){
    var form = layui.form;

    //各种基于事件
  });
  $('.quyu-item ').click(function(){
    $(this).addClass('active').siblings().removeClass('active')
  });
  $('.delete-icon').click(function(){
    $(this).parents('.delete-item').remove()
  });
  $('.delete-box').click(function(){
    $('.delete-item').remove()
  });
</script>
</body>
</html>